<template>
  <div class="page-preview">
    <iframe
      ref="iframe"
      :src="url"
      :style="{
        width: '1920px',
        height: '1080px',
        transform: `scale(${scale})`
      }"
    ></iframe>
    <div class="handle-box">
      <div
        class="btn"
        :class="{
          disabled: scale <= min
        }"
        @click="setScale(false)"
      >
        -
      </div>
      <div>{{ scale }}</div>
      <div
        class="btn"
        :class="{
          disabled: scale >= max
        }"
        @click="setScale(true)"
      >
        +
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 页面预览
 * @author 朱琦
 * @date   时间：2023/2/15
 */
export default {
  name: 'PagePreview',
  props: {
    url: {
      type: String,
      default: null
    }
  },
  components: {},
  data() {
    return {
      scale: 0.7,
      max: 1, // 最大值
      min: 0.5 // 最小值
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * 重载iframe
     */
    reload() {
      this.$refs.iframe.src = this.url
    },
    /**
     * 设置iframe倍数
     * @param {Boolean} magnify 是否是放大
     */
    setScale(magnify) {
      const unit = 0.1 // 改变单位
      let scale = this.scale
      if (magnify) {
        if (this.scale >= this.max) {
          return
        }
        scale = this.scale + unit
      } else {
        if (this.scale <= this.min) {
          return
        }
        scale = this.scale - unit
      }
      this.scale = Number(scale.toFixed(1))
    }
  }
}
</script>

<style scoped lang="less">
.page-preview {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 20px;
  display: flex;
  // justify-content: center;
  align-items: center;
  iframe {
    border: 0;
    padding: 0;
    box-shadow: 0 0 12px rgba(204, 204, 204, 0.6);
    flex-shrink: 0;
  }
  .handle-box {
    position: fixed;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    padding: 4px;
    > div {
      padding: 5px 12px;
      font-size: 16px;
      border-left: 1px solid #cccccc5c;
      border-right: 1px solid #cccccc5c;
    }
    .btn {
      cursor: pointer;
      border: none;
      &.disabled {
        cursor: no-drop;
      }
    }
  }
}
</style>
